<template>
  <div class="app-container">

    <h2 class="steps-title">发布新课程</h2>

    <el-steps :active="active" finish-status="success" align-center style="margin-bottom: 40px;">
      <el-step title="填写课程基本信息"/>
      <el-step title="创建课程大纲"/>
      <el-step title="发布课程"/>
    </el-steps>

    <!-- 章节列表 -->
    <ChapterList :course-id="courseId" />

    <div class="steps-bottom">
      <el-button @click="previous">上一步</el-button>
      <el-button :disabled="saveBtnDisabled" type="primary" @click="next">下一步</el-button>
    </div>
  </div>
</template>

<script>
  import ChapterList from '@/views/course/components/ChapterList'
  export default {
    components:{
      ChapterList
    },
    data() {
      return {
        active: 1,
        courseId: '', // 所属课程id
        saveBtnDisabled: false // 保存按钮是否禁用
      }
    },

    created() {
      this.init()
    },

    methods: {
      init() {
        if (this.$route.params && this.$route.params.id) {
          this.courseId = this.$route.params.id
        }
      },

      previous() {
        this.$router.push({ path: '/manage/course/info/' + this.courseId })
      },

      next() {
        this.$router.push({ path: '/manage/course/publish/' + this.courseId })
      }
    }
  }
</script>

<style scoped>
  .steps-title{
    padding: 20px;
    text-align: center;
  }
  .steps-bottom{
    text-align: center;
    padding: 20px;
  }
</style>
